<template>
  <div class="column-center toLeft-10 animate__animated animate__zoomIn" style="animation-duration: 200ms" id="user-head-jumpBox">
    <div class="jumpBox-sm background-color-white boxShadow-white">
      <div class="padding-10" id="langMenu">
        <li class="flex --oneLine menu-width-180px  noClick"><div class="menuIcon">
          <svg class="icon-1 noClick" aria-hidden="true">
            <use xlink:href="#icon-yuyan"/>
          </svg>
        </div><span class="toRight-3">{{$t('m.langChange')}}</span><div class="back-right-icon"><svg class="icon-2" fill="var(--theme-fontMain)" aria-hidden="true">
          <use xlink:href="#icon-back"/>
        </svg></div></li>
        <div class="cutLine"/>
        <li class="flex --oneLine menu-width-180px "  @click="zhCN"><span class="toRight-3">中文 简体</span><div class="checked zhCN"></div></li>
        <li class="flex --oneLine menu-width-180px "  @click="tcCN"><span class="toRight-3">中文 繁體</span><div class="checked tcCN"></div></li>
        <li class="flex --oneLine menu-width-180px " @click="enUS"><span class="toRight-3">English</span><div class="checked enUS"></div></li>
      </div>
      <ul class="padding-10" id="jumpBox-In">
        <li v-if="isClose" class="flex --oneLine menu-width-180px" id="closeUser">
          <div class="menuIcon">
            <svg t="1621839339119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1705" width="13" height="13"><path d="M924.5 338.9c-22.5-53.2-54.7-101-95.7-142s-88.8-73.2-142-95.7c-55.1-23.3-113.6-35.1-173.9-35.1-60.3 0-118.8 11.8-173.9 35.1-53.2 22.5-101 54.7-142 95.7s-73.2 88.8-95.7 142C77.9 394 66.1 452.5 66.1 512.8c0 60.3 11.8 118.8 35.1 173.9 22.5 53.2 54.7 101 95.7 142s88.8 73.2 142 95.7c55.1 23.3 113.6 35.1 173.9 35.1 60.3 0 118.8-11.8 173.9-35.1 53.2-22.5 101-54.7 142-95.7s73.2-88.8 95.7-142c23.3-55.1 35.1-113.6 35.1-173.9 0.1-60.3-11.7-118.8-35-173.9zM130.1 512.8c0-102.2 39.8-198.3 112.1-270.6 72.3-72.3 168.4-112.1 270.6-112.1 89.8 0 174.9 30.7 243.3 87.3L217.4 756.2c-56.5-68.4-87.3-153.5-87.3-243.4z m653.4 270.7c-72.3 72.3-168.4 112.1-270.6 112.1-93.1 0-181.2-33-250.8-93.6L802 262.1c60.5 69.6 93.6 157.6 93.6 250.8 0 102.2-39.8 198.3-112.1 270.6z" p-id="1706"></path></svg>
          </div>
          <el-tooltip class="item" effect="dark" content="封禁可能原因：您在社区中未遵守社区规范。" placement="left">
           <span class="toRight-3">{{$t('m.AccountBlocked')}}</span>
          </el-tooltip>
        </li>
        <li class="flex --oneLine menu-width-180px" id="langChange"><div class="menuIcon">
          <svg t="1622638701642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2594" width="13" height="13"><path d="M848.805886 805.572222c70.998007-81.260745 109.779266-184.217628 109.779266-293.14448 0-119.204939-46.421262-231.277434-130.713041-315.569212C744.876861 113.862257 634.94103 67.61598 517.788843 66.213028c-1.924839-0.599657-10.290367-0.592494-12.227486 0.01535C388.878868 67.945485 279.434224 114.159016 196.73471 196.85853 113.863281 279.730982 67.630307 389.460106 66.095347 506.415818c-0.428765 1.64957-0.436952 8.601912-0.021489 10.226922 1.082658 117.628024 47.364751 228.058113 130.660852 311.354214 84.291778 84.291778 196.36325 130.713041 315.569212 130.713041 119.204939 0 231.277434-46.421262 315.569212-130.713041 6.139837-6.139837 12.054547-12.444427 17.789155-18.871813 0.50756-0.453325 1.001817-0.928139 1.471514-1.440815C847.750857 807.012014 848.295256 806.299793 848.805886 805.572222zM107.447151 532.043499l187.501418 0c1.322112 65.678862 9.253758 127.264499 22.505573 182.112688-61.690014 16.687054-100.819197 38.371936-121.076566 51.906184C144.30971 701.336206 111.676475 620.35687 107.447151 532.043499zM195.881272 259.408121c20.090571 13.556761 59.242266 35.461653 121.340579 52.260248-12.998035 54.127781-20.827351 114.778116-22.243607 179.432649L107.525945 491.101018C112.076588 403.731134 144.437623 323.612399 195.881272 259.408121zM917.081898 491.099994 729.628576 491.099994c-1.415232-64.630996-9.240455-125.260865-22.229281-179.37432 61.95505-16.693194 101.235682-38.444591 121.56673-52.020794C880.270505 323.860039 912.537396 403.866211 917.081898 491.099994zM688.677908 491.099994 532.167319 491.099994 532.167319 335.061149c52.209082-1.094938 97.103572-6.453992 135.272893-14.033621C680.000272 373.163955 687.286212 430.896844 688.677908 491.099994zM532.167319 294.115598 532.167319 109.918435c36.84107 10.398838 72.779583 49.205679 100.926644 110.015649 8.810666 19.035542 16.645099 39.641859 23.464411 61.521169C621.531626 288.227494 580.261687 293.062616 532.167319 294.115598zM491.223814 110.273523l0 183.805236c-47.504944-1.12666-88.378863-6.001691-123.120109-12.802584 6.807033-21.812795 14.623046-42.35976 23.409153-61.344137C419.351903 159.792333 454.809463 121.175827 491.223814 110.273523zM491.223814 335.040682l0 156.059312L335.928912 491.099994c1.391696-60.213383 8.679683-117.955482 21.243837-170.099073C395.008472 328.536548 439.487499 333.887416 491.223814 335.040682zM335.893096 532.043499l155.330718 0 0 158.667719c-51.609425 1.194198-96.019891 6.563486-133.821845 14.103206C344.576873 651.927913 337.193719 593.243349 335.893096 532.043499zM491.223814 731.672118l0 182.909843c-36.415374-10.902304-71.871911-49.51881-99.709933-109.659539-8.679683-18.752086-16.409738-39.034015-23.157419-60.551074C402.9964 737.645157 443.773106 732.820268 491.223814 731.672118zM532.167319 914.937049 532.167319 731.608673c47.904033 1.025353 89.103364 5.862521 124.116809 12.656251-6.755868 21.555945-14.497179 41.87369-23.190165 60.656475C604.946902 865.73137 569.008388 904.538211 532.167319 914.937049zM532.167319 690.660052 532.167319 532.043499l156.546406 0c-1.298576 61.096497-8.66024 119.68487-21.445428 172.502819C629.154233 697.013761 584.319096 691.710988 532.167319 690.660052zM729.659275 532.043499l187.501418 0c-4.221138 88.138386-36.732599 168.973436-88.620363 233.635131-20.469194-13.668301-59.635215-35.298947-121.30374-51.868321C720.43724 659.049101 728.33921 597.585237 729.659275 532.043499zM801.518906 228.742704c-18.329461 11.570523-52.309366 29.355585-104.858186 43.493583-19.295462-63.056128-46.110177-115.004267-78.06189-150.97655C689.00025 140.410913 751.833297 178.097234 801.518906 228.742704zM406.007991 121.259738c-31.905664 35.920094-58.690704 87.768973-77.979002 150.702304-52.40351-14.241352-86.370113-32.099069-104.581893-43.587728C273.076422 177.914062 335.777463 140.364865 406.007991 121.259738zM223.917816 796.963147c18.284435-11.535731 52.098565-29.230742 104.332207-43.335994 19.271926 62.60485 45.976124 114.186645 77.757968 149.968593C335.99952 884.550994 273.472442 847.181899 223.917816 796.963147zM618.59883 903.595746c31.801287-35.803437 58.517765-87.426165 77.792761-150.08218 51.984978 14.023388 85.972047 31.631418 104.533798 43.208081C751.3329 847.061149 688.718841 884.521319 618.59883 903.595746z" p-id="2595"></path></svg>
        </div><span class="toRight-3">{{$t('m.langChange')}}</span></li>
        <router-link v-if="loginState" to="/home/setting"><li class="flex --oneLine menu-width-180px" id="settingButton"><div class="menuIcon">
          <svg t="1621134932571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3024" width="13" height="13"><path d="M979.52953384 636.2602336l-73.41605545-62.76490615a402.86174806 402.86174806 0 0 0 5.27122536-64.78041321c0-21.74102172-1.79549069-43.4899012-5.27122536-64.78434205l73.41605545-62.76359654c11.31774649-9.63619288 15.46531688-25.32676461 10.41934635-39.45233899l-1.0070987-2.91128796c-20.28603257-56.59659025-50.3208854-108.60295816-89.3227147-154.55625685l-2.01943593-2.3533893a36.0027967 36.0027967 0 0 0-39.34364041-10.64853006l-91.11689576 32.39217105c-33.6245246-27.57014574-71.1713647-49.31509633-111.73819131-64.55384874l-17.59999947-95.26708539c-2.68734273-14.68347303-14.23427293-26.11515656-28.91643635-28.80773777l-3.02784423-0.55789865c-58.39339055-10.53459303-119.80938685-10.53459303-178.20277744 0l-3.02522498 0.55789865c-14.68478263 2.69258121-26.22647437 14.12426477-28.91905557 28.80773777l-17.70607878 95.71497583c-40.23680208 15.24137165-77.56100659 36.8671467-110.96027633 64.3299035l-91.79004107-32.61611625c-14.01032771-4.93072386-29.70220907-0.78184385-39.33709233 10.64853006l-2.02074551 2.3533893c-39.00444854 46.06199724-69.04192062 98.06836515-89.32402433 154.55625685l-1.00971794 2.91128796c-5.04204166 14.00901808-0.89970978 29.70613794 10.42327521 39.45233899l74.3065979 63.43805146c-3.47442509 21.06918605-5.15728833 42.58626253-5.15728836 63.99464047 0 21.52100535 1.68286324 43.03808184 5.15728836 63.99725971l-74.3065979 63.43674185c-11.32298499 9.6388121-15.46531688 25.32807424-10.42327521 39.45102934l1.00971794 2.91521685c20.2821037 56.48789171 50.31957578 108.60295816 89.32402433 154.55625681l2.02074551 2.35338931a35.99755824 35.99755824 0 0 0 39.33709233 10.6498397l91.79004107-32.61742587c33.39796012 27.46144715 70.72216464 49.20377851 110.96027633 64.33645159l17.70607878 95.71497585c2.69258121 14.68347303 14.23427293 26.11384697 28.91905557 28.80118965l3.02522498 0.55920826a503.64102911 503.64102911 0 0 0 89.10269835 7.96249697c29.92615429 0 59.96362637-2.69389082 89.10007909-7.96249697l3.02784423-0.55920826c14.68216338-2.68734273 26.22909363-14.11771667 28.91643635-28.80118965l17.59999947-95.26577577c40.56813625-15.24922938 78.11366675-36.87369481 111.73819131-64.56039683l91.11689576 32.39217103c14.01032771 4.93072386 29.70613794 0.78184385 39.34364041-10.6498397l2.01943593-2.35338931c39.00182927-46.06330684 69.03668213-98.06836515 89.3227147-154.55625681l1.0070987-2.91521685c5.04597053-13.78114399 0.89840015-29.47171573-10.41934635-39.22446488zM826.54482245 457.16036566a317.23478443 317.23478443 0 0 1 4.25626895 51.66717602c0 17.37736386-1.45498917 34.74425073-4.25626895 51.66455675l-7.39935983 44.94619999 83.72015514 71.62056478c-12.66272751 29.25038974-28.68856225 56.82446435-47.74355085 82.48780158l-104.00487809-36.87369479-35.19476044 28.91774594c-26.78830188 21.96496695-56.60444798 39.22708414-88.87875309 51.33191299l-42.70281882 16.02321549-20.06208734 108.71820486c-31.49508051 3.58443326-63.6567582 3.58443326-95.268395 0l-20.05946809-108.94215007-42.36493656-16.24847036c-31.94297095-12.10613848-61.64125116-29.36563641-88.2056078-51.2219048l-35.18821234-29.02775415-104.6858811 37.20764823c-19.05105975-25.66595651-34.96950557-53.34611039-47.74224124-82.48518237l84.61593606-72.28847159-7.28280356-44.82964368c-2.69258121-16.70421855-4.14757038-33.96502609-4.14757037-50.99926918 0-17.14687051 1.34498098-34.29897953 4.14757037-50.99534035l7.28280356-44.82964367-84.61593606-72.29240047c12.6640371-29.25038974 28.6911815-56.8218451 47.74224124-82.4878016l104.6858811 37.20764821 35.18821234-29.02775413c26.56435663-21.85626838 56.26263684-39.11707594 88.2056078-51.2166663l42.48018322-16.03107325 20.05946812-108.94084045c31.49639013-3.58574288 63.65806782-3.58574288 95.26708534 0l20.06339698 108.71820485 42.70150918 16.02976361c32.16167768 12.09959037 62.09176084 29.36039792 88.87351461 51.32536488l35.19476042 28.91905557 104.00618773-36.87369481c19.05629825 25.66595651 34.97081521 53.35265851 47.74878935 82.49304007l-83.72670325 71.6140167 7.29066127 44.7196355z m0 0" fill="var(--theme-fontMain)" p-id="3025"></path><path d="M516.86917167 300.35941806c-108.9382212 0-197.25383718 88.32216409-197.25383718 197.25907567 0 108.94215005 88.31561599 197.25776602 197.25383718 197.25776604 108.94215005 0 197.25645642-88.31692561 197.25645642-197.25776604 0-108.93691157-88.31561599-197.25907566-197.25645642-197.25907567z m88.76481607 286.02389173c-23.75783837 23.65306869-55.25160926 36.76499625-88.76481607 36.76499626-33.50927793 0-65.00435842-13.11323718-88.76612568-36.76499626-23.64913982-23.75652877-36.75844814-55.25029966-36.75844815-88.76481606 0-33.50665868 13.10930834-65.00435842 36.75844815-88.76481606 23.76176725-23.76176725 55.25684776-36.75844814 88.76612568-36.75844816 33.51320678 0 65.00828729 12.99668091 88.76481607 36.75844816 23.65175908 23.76176725 36.76237701 55.25815737 36.76237701 88.76481606 0 33.51451641-13.11061794 65.00828729-36.76237701 88.76481606z m0 0" fill="var(--theme-fontMain)" p-id="3026"></path></svg>        </div><span class="toRight-3">{{$t('m.settings')}}</span></li></router-link>
        <li class="flex --oneLine menu-width-180px darkButton"><div class="menuIcon">
          <svg t="1622639055873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6222" width="11" height="11"><path d="M72.777518 499.133396c0 261.113472 191.117508 440.820979 452.011557 452.011557 202.600649 8.703782 319.918859-98.008978 429.264697-263.600267-52.442118 19.601796-109.345838 43.226348-164.494174 43.226348-129.898467 0-255.042767-43.445771-346.907899-135.310903C350.859709 503.741281 293.882847 364.261339 293.882847 234.362872c0-55.148336 22.893142-111.978915 42.421797-164.421032C178.466304 168.0971 72.850659 309.917555 72.850659 499.206537zM153.598354 870.177834A521.349252 521.349252 0 0 1 0.002194 499.133396c0-115.19712 37.00936-223.95783 107.005325-314.506423A524.201752 524.201752 0 0 1 226.300537 72.428635 533.344381 533.344381 0 0 1 376.751633 1.042991a25.59936 25.59936 0 0 1 29.987821 36.27795c-32.913463 64.364105-48.273079 125.656287-48.273078 193.092316 0 239.902574 195.140264 435.18912 435.115979 435.18912 67.436028 0 128.72821-15.359616 193.092315-48.419361a25.59936 25.59936 0 0 1 36.277951 30.060963 534.587778 534.587778 0 0 1-71.312503 150.451096 524.201752 524.201752 0 0 1-112.271479 119.293017A509.646687 509.646687 0 0 1 524.862216 1023.993417 521.93438 521.93438 0 0 1 153.598354 870.177834z" p-id="6223"></path></svg>        </div><span class="toRight-3">{{$t('m.dark')}}</span>
          <slide-button class="D_NChange"/>
        </li>
        <div class="cutLine"/>
        <li v-if="!loginState" class="flex --oneLine menu-width-180px logIn"><div class="menuIcon">
          <svg t="1622639149746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7102" width="13" height="13"><path d="M810.666667 938.666667h-170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h170.666667c25.6 0 42.666667-17.066667 42.666666-42.666666V213.333333c0-25.6-17.066667-42.666667-42.666666-42.666666h-170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h170.666667c72.533333 0 128 55.466667 128 128v597.333334c0 72.533333-55.466667 128-128 128z" p-id="7103"></path><path d="M426.666667 768c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l183.466667-183.466667-183.466667-183.466667c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l213.333334 213.333333c17.066667 17.066667 17.066667 42.666667 0 59.733334l-213.333334 213.333333c-8.533333 8.533333-17.066667 12.8-29.866666 12.8z" p-id="7104"></path><path d="M640 554.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z" p-id="7105"></path></svg>
        </div><span class="toRight-3">{{$t('m.toLog')}}</span></li>
        <router-link v-if="isAdmin" to="/admin"><li class="flex --oneLine menu-width-180px logOut"><div class="menuIcon rotateY180">
          <svg t="1621134819554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1884" width="13" height="13"><path d="M512 597.333333v85.333334a256 256 0 0 0-256 256H170.666667a341.333333 341.333333 0 0 1 341.333333-341.333334z m0-42.666666c-141.44 0-256-114.56-256-256s114.56-256 256-256 256 114.56 256 256-114.56 256-256 256z m0-85.333334c94.293333 0 170.666667-76.373333 170.666667-170.666666s-76.373333-170.666667-170.666667-170.666667-170.666667 76.373333-170.666667 170.666667 76.373333 170.666667 170.666667 170.666666z m384 256h42.666667v213.333334h-341.333334v-213.333334h42.666667v-42.666666a128 128 0 0 1 256 0v42.666666z m-85.333333 0v-42.666666a42.666667 42.666667 0 0 0-85.333334 0v42.666666h85.333334z" p-id="1885"></path></svg>        </div><span class="toRight-3">{{$t('m.admin')}}</span></li></router-link>
        <li v-if="loginState" class="flex --oneLine menu-width-180px logOut" @click="logout"><div class="menuIcon rotateY180">
          <svg t="1622639149746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7102" width="14" height="14"><path d="M810.666667 938.666667h-170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h170.666667c25.6 0 42.666667-17.066667 42.666666-42.666666V213.333333c0-25.6-17.066667-42.666667-42.666666-42.666666h-170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h170.666667c72.533333 0 128 55.466667 128 128v597.333334c0 72.533333-55.466667 128-128 128z" p-id="7103"></path><path d="M426.666667 768c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l183.466667-183.466667-183.466667-183.466667c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l213.333334 213.333333c17.066667 17.066667 17.066667 42.666667 0 59.733334l-213.333334 213.333333c-8.533333 8.533333-17.066667 12.8-29.866666 12.8z" p-id="7104"></path><path d="M640 554.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z" p-id="7105"></path></svg>
        </div><span class="toRight-3">{{$t('m.logOut')}}</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import slideButton from '../functional unit/slideButton'
  import $ from 'jquery'

  export default {
    name: 'userMenuLogOut',
    components:{
      slideButton,
    },
    data(){
      return{
        loginState: false,
        isAdmin:false,
        isClose:false,
      }
    },
    created() {
      this.isLogin()
      this.userRoot()
    },
    methods: {
      zhCN () {
        location.reload()
        this.$i18n.locale = 'zh-CN'
        window.localStorage.setItem('lang','zh-CN')
      },
      tcCN () {
        location.reload()
        this.$i18n.locale = 'tc-CN'
        window.localStorage.setItem('lang','tc-CN')
      },
      enUS () {
        location.reload()
        this.$i18n.locale = 'en-US'
        window.localStorage.setItem('lang','en-US')
      },
      isLogin(){
        if(sessionStorage.token){
          this.loginState = true
        }
      },
      async userRoot(){
        if(this.loginState === true){
          const {data:res} = await this.$axios.post('v1/judgeRoot',{userId:JSON.parse(sessionStorage.user).userId})
          if(res.data.rootCode === 1 || res.data.rootCode === 2){
            this.isAdmin = true
          }
          if(res.data.rootCode === 400){
            this.isClose = true
          }

        }
      },
      async logout(){
          window.sessionStorage.clear()//清楚session
          this.$message.success("已成功退出")
          await location.reload();
          // const {data: res} = await this.axios.post("v1/logout")
          // if(res.code === 200){
          //   console.log(1)
          // }else{
          //   console.log(2)
          // }

      },
    },
    mounted () {
      $(function () {
        $('#langChange').click(function () {
          $('#langMenu').css('display',' block');
          $('#jumpBox-In').css('display',' none');
        })
      })
      $(function () {
        $('.back-right-icon').click(function () {
          $('#langMenu').css('display','none');
          $('#jumpBox-In').css('display','block');
        })
      })
    },

  }
</script>

<style scoped>
  .icon-1 {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    overflow: hidden;
  }
  .icon-2{
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    overflow: hidden;
  }
  #closeUser:hover{
    background-color: rgba(255, 64, 64, 0.17);
  }
  #closeUser{
    color: #ff4040;
    background-color: rgba(255, 64, 64, 0.17);
  }
  #closeUser .icon{
    fill: #ff4040;
  }
</style>
